<template>
	<view class="content">
		<view class="privateCloud">
			<text @click="toUrl('/pages/login/openStack/index')">私有云</text>
		</view>
		<image src="@/static/logo.png" class="logo"></image>
		<view class="logoText">
			<text>万狼CRM</text>
			<text>实现企业【销售+管理】全流程</text>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label="手机号" label-width="110" label-position="top" :border-bottom="false">
					<!-- number -->
					<u-input type="text" maxlength="11" :border="true" placeholder="请输入手机号码" v-model="form.phone" />
				</u-form-item>
				<u-form-item label="密码" label-width="110" label-position="top" :border-bottom="false">
					<u-input type="password" :password-icon="true" :border="true" placeholder="请输入密码"
						v-model="form.password" />
				</u-form-item>
			</u-form>
		</view>
		<view class="auxiliary">
			<text>验证码</text>
			<text>忘记密码?</text>
		</view>
		<view class="toLogin">
			<u-button type="primary" shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle"
				@click="toLogin">公有云登录</u-button>
		</view>
		<view class="register">
			<view class="registerBox">
				<text>立即注册</text><text class="iconfont icon-rightArrow"></text>
			</view>
			<view class="tail">
				<u-checkbox v-model="checked" active-color="#007aff">
					<view class="tailBox">
						我已阅读并接受
						<text @click.stop="privacyAgreement(1)">《用户协议》</text>和
						<text @click.stop="privacyAgreement(2)">《隐私声明》</text>
					</view>
				</u-checkbox>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/utils/api/index.js'
	export default {
		data() {
			return {
				form: {
					phone: '',
					password: ''
				},
				checked: true,
				customStyle: {
					height: '90rpx'
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 点协议
			privacyAgreement(index) {
				if (index === 1) {
					console.log('用户协议');
				} else {
					console.log('隐私声明');
				}
			},
		// 登录
			async toLogin() {
				if (this.isNull(this.form.phone, '手机号码不能为空')) {
					return
				}
				if (this.isNull(this.form.password, '密码不能为空')) {
					return
				}
				let data = await toLogin({
					username: this.form.phone,
					password: this.form.password
				})
				// console.log(data);
				if (data.code === 200) {
					// 存token
					this.$store.commit('setToken', data.authKey)
					// 存用户信息
					this.$store.commit('setUserInfo', data.userInfo)
					// 跳首页
					uni.switchTab({
						url: '/pages/tabBar/index/index'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: data.error
					});
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 70rpx 40rpx 0;

		// 表单
		.u-form-item {
			// padding: 0;
		}

		.privateCloud {
			margin-bottom: 70rpx;

			text {
				font-size: 28rpx;
				color: $theme;
			}
		}

		.logo {
			display: block;
			width: 100rpx;
			height: 100rpx;
			margin: 0 auto;
		}

		.logoText {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;

			&>text:first-child {
				margin: 20rpx 0;
				font-size: 48rpx;
				// font-weight: bold;
			}

			&>text:last-child {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.auxiliary {
			margin: 10rpx 0 50rpx;
			display: flex;
			justify-content: space-between;

			text {
				color: $theme;
			}
		}

		.register {
			margin: 50rpx 0 0;

			.registerBox {
				margin-bottom: 40rpx;
				text-align: center;
				color: $theme;

				text {
					font-size: 28rpx;
				}

				.iconfont {
					font-weight: bold;
					font-size: 24rpx;
				}
			}

			.tail {
				display: flex;
				justify-content: center;

				.tailBox {
					font-size: 24rpx;
				}
			}
		}


	}
</style>
